import React, {FC, useEffect, useState} from "react";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import {Col, Form, Input, message, Modal, Popconfirm, Row, Select, Table, Tooltip} from "antd";
import api from "../../../api";
import {reg, roleList} from "../../../utils";
import QR from "../../../components/QR";
import BreadcrumbPath from "../../../components/BreadcrumbPath";


const MyProject: FC<any> = ({MobxData}) => {
    // 项目信息
    const {projectList, getProjectList, changeProjectList} = MobxData;
    // 项目类别
    const {projectTypeList, getProjectTypeList} = MobxData;

    const [dataSource, setDataSource] = useState<Array<any>>([]);
    // 对话框是否可见
    const [isModalVisible, setIsModalVisible] = useState(false);

    const [form] = Form.useForm();

    // 表头内容
    const columns = [
        {
            title: '项目名称',
            dataIndex: 'name',
            key: 'name',
            width: 'auto',
        },
        {
            title: '项目类别',
            dataIndex: 'type',
            key: 'type',
            width: 'auto',
        },
        {
            title: '亮点及内容',
            dataIndex: 'content',
            key: 'content',
            width: 'auto',
            ellipsis: {
                showTitle: false,
            },
            render: (introduce: any) => (
                <Tooltip placement="topLeft" title={introduce}
                         overlayInnerStyle={{maxHeight: "200px", overflowY: "auto"}}>
                    {introduce}
                </Tooltip>
            ),
        },
        {
            title: '项目地址',
            dataIndex: 'url',
            key: 'url',
            width: 'auto',
            render: (text: any, record: any) => (
                <QR url={text}><a href={text} target="_blank">{text}</a></QR>
            )
        },
        {
            title: '成绩',
            dataIndex: 'score',
            key: 'score',
            width: 'auto',
            render: (text: any, record: any) => text > 0 ? text : "待评分"
        },
        {
            title: '操作',
            key: 'action',
            width: '200px',
            render: (text: any, record: any, index: any) => {
                return record.score > 0 ? "项目已经评分，不能修改" : (
                    <div style={{color: "#409eff"}}>
                        <span style={{margin: "0 10px", cursor: "pointer"}} onClick={() => {
                            form.setFieldsValue(record)
                            setIsModalVisible(true);
                        }}>修改</span>
                        <Popconfirm
                            title="确定要删除吗?"
                            onConfirm={() => {
                                // console.log("删除");
                                // 删除班级
                                api.delProject({id: record.key}).then(res => {
                                    message.success(res.msg);
                                }).catch(err => {
                                    message.error(err.msg);
                                })
                                // 更新数据
                                getProjectList();
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <span style={{margin: "0 10px", cursor: "pointer"}}>删除</span>
                        </Popconfirm>
                    </div>
                )
            }
        }
    ];

    useEffect(() => {
        getProjectList();
        getProjectTypeList();
    }, [])
    useEffect(() => {
        // 拼装表格数据
        setDataSource(projectList.map((item: any) => ({
            key: item._id,
            name: item.name,
            type: item.type,
            content: item.content,
            url: item.url,
            score: item.score
        })))
    }, [projectList])

    const handleOk = () => {
        // 验证表单
        form.validateFields().then(values => {
            values.id = form.getFieldValue("key");
            console.log(values);
            // 更新项目信息
            api.upProject(values).then((res) => {
                message.success(res.msg);
            }).catch(err => {
                message.error(err);
            })

            // 更新数据
            getProjectList()
            // 关闭对话框
            setIsModalVisible(false)
        }).catch(err => {
        })
    }


    return (
        <div>
            {/*<h1>我的项目</h1>*/}
            <BreadcrumbPath/>
            <Table dataSource={dataSource} columns={columns} sticky
                   pagination={{
                       pageSize: 8,
                       hideOnSinglePage: true,
                       responsive: true,
                       position: ["bottomCenter"],
                       showQuickJumper: true
                   }}/>
            <Modal title="修改项目信息" okText="提交" cancelText="取消" visible={isModalVisible}
                   onOk={handleOk}
                   onCancel={() => {
                       setIsModalVisible(false)
                   }}>
                <Form
                    name="basic"
                    form={form}
                    layout='vertical'
                >
                    <Form.Item
                        label="项目名称"
                        name="name"
                        rules={[{required: true, message: '项目名称不能为空!'}]}
                    >
                        <Input placeholder="请输入项目名称"/>
                    </Form.Item>
                    <Form.Item
                        label="项目类别"
                        name="type"
                        rules={[{required: true, message: '项目类别不能为空!'}]}
                    >
                        <Select placeholder="请选择项目类别" style={{width: "100%"}} onChange={(value) => {
                        }}>
                            {
                                projectTypeList.map((item: any) => {
                                    return <Select.Option value={item.id} key={item._id}>{item.name}</Select.Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="亮点及内容"
                        name="content"
                        rules={[{required: true, message: '亮点及内容不能为空!'}]}
                    >
                        <Input.TextArea placeholder="请输入手机号码" rows={4} allowClear autoSize showCount/>
                    </Form.Item>
                    <Form.Item
                        label="项目地址"
                        name="url"
                        rules={[
                            {required: true, message: '项目地址不能为空!'},
                            {pattern: reg.url, message: '请输入正确的项目地址!'}
                        ]}
                    >
                        <Input type="url" placeholder="请输入项目地址"/>
                    </Form.Item>

                </Form>
            </Modal>
        </div>
    )
}

export default inject('MobxData')(observer(MyProject));